// 引入connect用于链接UI组件与redux
import {connect} from "react-redux"
// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/count_actions'

/* 
    1、a函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value -----》 状态
    2、mapStateToProps函数返回的是一个对象
    3、mapStateToProps用于传递状态的
*/
function mapStateToProps(state) {
    return {count:state}
}
/*
    1、b函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value -----》 方法
    2、mapDispatchToProps函数返回的是一个对象
    3、mapDispatchToProps用于传递操作状态的方法

*/ 
function mapDispatchToProps(dispatch) {
    return {
        jia:(number)=>{
            // 通知redux执行加法
            dispatch(createIncrementAction(number))
        },
        jian:(number)=>{
            // 通知redux执行减法
            dispatch(createDecrementAction(number))
        },
        jiaAsync:(number, time)=>{
            // 通知redux异步执行加法
            dispatch(createIncrementAsyncAction(number, time))
        }, 
    }
}

// connect()()创建并暴露一个Count组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

